<!DOCTYPE html>
<html>

<head>
<style>
body {
  padding: 20px;
}
.msg {
  position: absolute;
  bottom: 0;
  left: 20px;
  color: #aaa;
  font-size: 12px;
  margin-bottom: 20px;
}
</style>
</head>

<body>
  <div class="msg">interactive (not an image)</div>
  <div id="app"></div>

  <script type="text/babel">
  var TicTacToe = BoardgameIO.Game({
    setup: () => ({ cells: Array(9).fill(null) }),

    moves: {
      clickCell(G, ctx, id) {
        let cells = [...G.cells];  // don't mutate original state.
        cells[id] = ctx.currentPlayer;
        return {...G, cells};      // don't mutate original state.
      }
    }
  });

  var App = BoardgameIO.ReactClient({ game: TicTacToe });
  ReactDOM.render(<App/>, document.getElementById('app'));
  </script>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="//unpkg.com/react@next/umd/react.development.js"></script>
  <script src="//unpkg.com/react-dom@next/umd/react-dom.development.js"></script>
  <script src="boardgameio.min.js"></script>
</body>

</html>
